<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>间接查找节点</title>
	</head>
	<body>
		<ul>
			<li id="red">红色</li><li>绿色</li>
		</ul>
	</body>
	<!-- 
		childNodes 		返回元素的一个子节点的数组
		children 		返回元素的所有的子元素数组
		firstChild 		返回元素的第一个子节点
		firstElementChild
		lastChild 		返回元素的最后一个子节点
		lastElementChild
		nextSibling 	返回元素的下一个兄弟节点
		nextElementSibling
		previousSibling 返回元素的上一个兄弟节点
		previousElementSibling
		parentNode 		返回元素的父节点
		parentElement
	 
	 -->
	 <script type="text/javascript">
	 	// 得到ul
		var ul = document.getElementsByTagName("ul")[0];
		// childNodes 		返回元素的一个子节点的数组
		console.log(ul.childNodes);
		// children 	返回元素的所有的子元素数组
		console.log(ul.children);
		
		// firstChild 		返回元素的第一个子节点
		console.log(ul.firstChild);
		console.log(ul.firstElementChild);
		// lastChild 		返回元素的最后一个子节点
		console.log(ul.lastChild);
		console.log(ul.lastElementChild);
		
		// nextSibling 	返回元素的下一个兄弟节点
		console.log(document.getElementById("red").nextSibling);
		console.log(document.getElementById("red").nextElementSibling);
		// previousSibling 返回元素的上一个兄弟节点
		console.log(document.getElementById("red").previousSibling);
		console.log(document.getElementById("red").previousElementSibling);
		
		// parentNode 		返回元素的父节点
		console.log(ul.parentNode);
		//  parentElement
		console.log(ul.parentElement);
		
	 </script>
</html>
